<template>
    <div class="approvalDetails">
        <div class="approvalDetails_header">
            <div class="approvalDetails_header_navBar">
                {{ isStatusName(title, lookData?.historyStatus) }}
                <img class="approvalDetails_header_navBar_img" src="@/assets/porduct/zuo_jiantou.png" alt=""
                    @click="routerBack">
            </div>
        </div>
        <ListItems class="approvalDetails_ListItems" :row="lookData" :status="status" @click="handleGetDetails()"
            :title="title" />
        <div class="approvalDetails_box">
            <StepBar stepBarTitle="审批流程" :data="getStepBarData()" :auditStatus="lookData?.historyStatus"
                :status="status" :hmMechanismsList="lookData?.hmMechanismsList" :title="title" />
        </div>

        <div class="approvalDetails_footer" v-if="isOperate(title, lookData?.historyStatus)">
            <van-popover v-model:show="showPopover" placement="top-start" :actions="actionsPopover"
                @select="onSelectPopover">
                <template #reference>
                    <div class="footer_left" @click.stop="showPopover = true">
                        <img class="footer_left_img" src="@/assets/productHome/icon_heisexiasanjiao.png" alt="">
                        更多
                    </div>
                </template>
            </van-popover>

            <div class="footer_center" @click="onClickRight" v-if="
                lookData?.historyStatus == '-10' ||
                lookData?.historyStatus == '-8' ||
                lookData?.historyStatus == '-3' ||
                lookData?.historyStatus == '8' ||
                lookData?.historyStatus == '9' ||
                lookData?.historyStatus == '10' ||
                lookData?.historyStatus == '12' ||
                lookData?.historyStatus == '17'
            ">
                编辑
            </div>
            <div class="footer_right" @click="approvalClick()">
                {{ isButtonName() }}
            </div>
        </div>
        <!-- 资质送审 -->
        <van-overlay :show="qualificationsFlag" z-index="2001">
            <div class="wrapper_qualifications" @click.stop>
                <div class="wrapper_div">
                    <van-image class="close" :src="colseImg" @click="qualificationsFlag = false"></van-image>
                    <div class="title">选择送审品类</div>
                    <div class="describe">请为您的商品选择送审的品类</div>
                    <div class="column">
                        <div class="lable">可选品类</div>
                        <div class="value" @click="categoryFlag = true">
                            {{ categoryMessage || '请选择' }}
                            <van-image :src="icon_heisexiasanjiao"></van-image>
                        </div>
                    </div>
                    <van-popup v-model:show="categoryFlag" position="bottom">
                        <van-picker title="可选品类" :columns="categoryColumns" @confirm="onConfirmCategory"
                            @cancel="categoryFlag = false" />
                    </van-popup>
                    <div class="buttons">
                        <div class="cancel" @click="qualificationsCancel">取消</div>
                        <div class="save" @click="qualificationsSubmit">确定</div>
                    </div>
                </div>
            </div>
        </van-overlay>

    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import ListItems from './components/listItems.vue' // 列表单个项
import StepBar from './components/stepBar/index.vue'  // 步骤条
import { getFirstDetailsByIdInvent, getSecondDetailsByIdInvent, getThirdDetailsByIdInvent, getDetailsById, getSecondDetailsById, getStockById, getPricingById } from '@/api/productList/index'
import { getSystemList } from '@/api/approval/index'
import { handleEditPermission } from "@/utils/auditStatusFilter";
import { reAuditSecond, editSevens, requestGroup, reAuditSecondInvent, requestThirdInvent } from "@/api/productList/index";
import { againStock } from '@/api/productHome/index.ts'
import { isStatusName } from './components/listItems.ts'
import { showFailToast, showSuccessToast } from "vant";
const colseImg = new URL("@/assets/approval/close.png", import.meta.url).href;
const icon_heisexiasanjiao = new URL("@/assets/productHome/icon_heisexiasanjiao.png", import.meta.url).href;
import { contractAudit } from '@/api/productList/index'

const route: any = useRoute()
const router = useRouter()
const showLoading = ref(false)
const status = ref()
const title = ref()

const showPopover = ref(false)
const actionsPopover = [
    { text: '补码', name: '1' }
];

const lookData = ref<any>({})

// 资质审核显隐
const qualificationsFlag = ref(false)
// 资质审核可选品类值
const categoryMessage = ref()
// 资质审核可选品类id
const categoryId = ref()
// 资质审核可选品类显隐
const categoryFlag = ref(false)
// 资质审核可选品类column
const categoryColumns = ref([])
const categoryMap = {
    '鞋帽': '1',
    '酒茶': '2',
    '箱包': '3',
    '百货': '4',
    '服装': '5',
    '食品': '6'
}
/** 可选品类column */
const getcategoryColumns = async () => {
    const res = await getSystemList({ parentId: '1796913597400784898' })
    if (res.data.length) {
        // 去掉惠麦优选部门
        const response = res.data.filter(item => item.deptName !== '惠麦优选')
        response.forEach(item => {
            item.text = item.deptName
            Object.keys(categoryMap).forEach(key => {
                if (item.deptName.includes(key)) {
                    item.value = categoryMap[key];
                    return;
                }
            });
        })
        categoryColumns.value = response
    }
}
getcategoryColumns()
/** 可选品类筛选 */
const onConfirmCategory = ({ selectedOptions }) => {
    categoryMessage.value = selectedOptions[0]?.text;
    categoryId.value = selectedOptions[0]?.value;
    categoryFlag.value = false
}
/** 可选品类取消 */
const qualificationsCancel = async () => {
    categoryMessage.value = ''
    qualificationsFlag.value = false
}
/** 可选品类提交 */
const qualificationsSubmit = async () => {
    if (!categoryMessage.value) {
        showFailToast({ message: "请选择可选品类", teleport: '.wrapper_div' });
    } else {
        if (title.value == '核价初审') {
            // 一审驳回
            await editSevens({ ids: [lookData.value.id], productType: categoryId.value })
        } else {
            // 研发总监复审
            await requestThirdInvent({ id: lookData.value.id, productType: categoryId.value })
        }
        showSuccessToast({ type: "success", message: "商品送审成功" });
        qualificationsFlag.value = false
        categoryMessage.value = ''
        routerBack()
    }
}

// 从新送审按钮文字
const isButtonName = () => {
    if (title.value === '组长审批') {
        if (lookData.value.historyStatus === '-10') {
            return '组长审批'
        }
    } else if (title.value === '总监初审') {
        if (lookData.value.historyStatus === '-8') {
            return '总监审批'
        }
    } else if (title.value === '总监审批') {
        if (lookData.value.historyStatus === '-3') {
            return '总监复核'
        }
    } else if (title.value === '核价初审') {
        if (lookData.value.historyStatus === '8' || lookData.value.historyStatus === '10' || lookData.value.historyStatus === '9') {
            return '发起初审'
        }
    } else if (title.value === '核价复审') {
        if (lookData.value.historyStatus === '12') {
            return '价格复审'
        }
    } else if (title.value === '入库审批') {
        if (lookData.value.historyStatus == '17') {
            return '重新入库'
        }
    } else if (title.value === '变价审批') {
        if (lookData.value.historyStatus == '20') {
            return '变价审核'
        }
    }
}
// 从新送审操作
const approvalClick = async () => {
    showLoading.value = true
    const type = isButtonName()
    if (type == '组长审批') {
        await requestGroup({ id: lookData.value.id })
        showSuccessToast({ type: "success", message: "商品送审成功" });
        routerBack()
    } else if (type == '总监审批') {
        await reAuditSecondInvent({ id: lookData.value.id })
        showSuccessToast({ type: "success", message: "商品送审成功" });
        routerBack()
    } else if (type == '总监复核') {
        qualificationsFlag.value = true
    }
    if (type === '发起初审') {
        qualificationsFlag.value = true
    }
    if (type === '价格复审') {
        await reAuditSecond({ id: lookData.value.id })
        showSuccessToast({ type: "success", message: "商品送审成功" });
        routerBack()
    }
    if (type === '重新入库') {
        await againStock({ id: lookData.value.productId });
        showSuccessToast({ type: "success", message: "产品重新入库中" });
        routerBack()
    }
    if (type === '变价审核') {
        router.push({
            path: '/researchmechanismPriceChange',
            query: {
                id: lookData.value.productId
            }
        });
    }
    showLoading.value = false
}
// 更多操作
const onSelectPopover = (action: any) => {
    if (action.text === '补码') {
        onClickComplement()
    }
}

// 需要展示步骤条的数据
const getStepBarData = () => {
    var data: any;
    if (title.value == '组长审批') {
        data = JSON.parse(JSON.stringify(lookData.value.inventFirstLogList || []))
        return data?.reverse()
    } else if (title.value == '总监初审') {
        data = JSON.parse(JSON.stringify(lookData.value.inventSecondLogList || []))
        return data?.reverse()
    } else if (title.value == '总监审批') {
        data = JSON.parse(JSON.stringify(lookData.value.inventThirddLogList || []))
        return data?.reverse()
    } else if (title.value == '核价初审') {
        data = JSON.parse(JSON.stringify(lookData.value.auditFirstLogList || []))
        return data?.reverse()
    } else if (title.value == '核价复审') {
        data = JSON.parse(JSON.stringify(lookData.value.auditSecondLogList || []))
        return data?.reverse()
    } else if (title.value == '入库审批') {
        data = JSON.parse(JSON.stringify(lookData.value?.logList || []))
        return data?.reverse()
    } else if (title.value == '无合同入库') {
        data = JSON.parse(JSON.stringify(lookData.value?.logList || []))
        return data?.reverse()
    } else if (title.value == '变价审批') {
        data = JSON.parse(JSON.stringify(lookData.value.hmChangeAuditLogVos || []))
        return data?.reverse()
    }
}

// 判断操作是否展示
const isOperate = (title, historyStatus) => {
    if (title == '组长审批') {
        if (historyStatus == '-10') {
            return true
        } else {
            return false
        }
    } else if (title == '总监初审') {
        if (historyStatus == '-8') {
            return true
        } else {
            return false
        }
    } else if (title == '总监审批') {
        if (historyStatus == '-3') {
            return true
        } else {
            return false
        }
    } else if (title == '核价初审') {
        if (historyStatus == '8' || historyStatus == '9' || historyStatus == '10') {
            return true
        } else {
            return false
        }
    } else if (title == '核价复审') {
        if (historyStatus == '12') {
            return true
        } else {
            return false
        }
    } else if (title == '入库审批') {
        if (historyStatus == '17') {
            return true
        } else {
            return false
        }
    } else if (title == '无合同入库') {
        return false
    } else if (title == '变价审批') {
        if (historyStatus == '20') {
            return true
        } else {
            return false
        }
    }
}


/** 补码跳转 */
const onClickComplement = () => {
    //  69码
    let styleCode = lookData.value.id;
    // 价格
    let price =
        lookData.value.hmMechanismsList[0].cooperationMode == "分佣"
            ? lookData.value.hmMechanismsList[0].price
            : lookData.value.hmMechanismsList[0].costPrice;
    // 佣金
    let commission =
        lookData.value.hmMechanismsList[0].cooperationMode == "分佣"
            ? lookData.value.hmMechanismsList[0].commission + "%"
            : "";
    // 机制
    let liveStreamingMechanism = lookData.value.hmMechanismsList[0].liveStreamingMechanism;
    // 商品名
    let styleName =
        lookData.value.styleName.length > 18
            ? lookData.value.styleName.substr(0, 18)
            : lookData.value.styleName;
    // 品牌名
    var brandName = lookData.value.brandName ? lookData.value.brandName : "";
    if (brandName.length > 18) {
        brandName = brandName.substr(0, 18);
    }
    // 上架时间
    let listingTime = lookData.value.shoppingTime ? "上架时间:" + lookData.value.shoppingTime : "上架时间:";
    // 规格/材质
    const gecs = lookData.value.specs ? lookData.value.specs : '';
    const specs = gecs.length > 200 ? gecs.substring(0, 200) : gecs
    let specsing =
        "规格/材质:" + specs;
    // 卖点
    let sellingPoint = "卖点:" + lookData.value.sellingPoints;
    //招商元姓名
    let recruiter = '招商:' + lookData.value.recruiter
    const arr: Array<string> = [];
    if (lookData.value.hmMechanismsList.length > 0) {
        lookData.value.hmMechanismsList.forEach((item, index) => {
            if (item.cooperationMode) {
                const obj = {
                    title: index == 0 ? '机制一:' : index == 1 ? '机制二:' : '机制三:',
                    number: item.cooperationMode == '分佣' ? `${item.price || 0.00}` : `${item.costPrice || 0.00}`,
                    commission: item.cooperationMode == '分佣' ? `${item.commission || 0.00}%` : '',
                    brokerage: item.cooperationMode == '分佣' ? `+${item.brokerage || 0.00}%` : '',
                    liveStreamingMechanism: index == 0 ? item.liveStreamingMechanism || '' : item.liveStreamingMechanism.substring(0, 8) || ''
                }
                arr.push(obj.title)
                arr.push(obj.number)
                arr.push(obj.commission)
                arr.push(obj.brokerage)
                arr.push(obj.liveStreamingMechanism)
            }
        })
    }

    (window as any).uni.navigateTo({
        url: `/pages/print/index?barCode=${encodeURIComponent(
            styleCode
        )}&num1=${encodeURIComponent(price)}&num2=${encodeURIComponent(
            commission
        )}&num3=${encodeURIComponent(
            liveStreamingMechanism
        )}&name=${encodeURIComponent(styleName)}&brand=${encodeURIComponent(
            brandName
        )}&listingTime=${encodeURIComponent(
            listingTime
        )}&recruiter=${encodeURIComponent(
            recruiter
        )}&specsing=${encodeURIComponent(
            specsing
        )}&mechanismList=${encodeURIComponent(
            arr.join(',')
        )}&sellingPoint=${encodeURIComponent(sellingPoint)}&page=1&from=merchants`,
    });
};

/** 编辑 */
const onClickRight = () => {
    var id = undefined;
    if (title.value == '组长审批' || title.value == '总监初审' || title.value == '总监审批' || title.value == '核价初审' || title.value == '核价复审') {
        id = lookData.value.id
    } else if (title.value == '无合同入库') {
        id = lookData.value.productsId
    } else {
        id = lookData.value.productId
    }
    if (handleEditPermission(lookData.value.historyStatus) == 1) {
        router.push(`/researchEditProduct/${id}`);
    } else if (handleEditPermission(lookData.value.historyStatus) == 4) {
        router.push(`/researchEditProduct/${id}?mechanism=mechanism`);
    } else if (handleEditPermission(lookData.value.historyStatus) == 3) {
        router.push(`/researchEditProduct/${id}?correctMechanism=correctMechanism`);
    } else if (handleEditPermission(lookData.value.historyStatus) == 5) {
        router.push(`/researchEditProduct/${id}?fiveMechanism=fiveMechanism`);
    }
};

// 返回
const routerBack = () => {
    router.go(-1)
}

/** 获取详情 */
const handleGetDetails = () => {
    if (title.value == '组长审批' || title.value == '总监初审' || title.value == '总监审批' || title.value == '核价初审' || title.value == '核价复审') {
        router.push({
            path: `/researchProductDetail/${route?.query?.id}`,
        });
    } else if (title.value == '无合同入库') {
        router.push({
            path: `/researchProductDetail/${lookData.value.productsId}`,
        });
    } else {
        router.push({
            path: `/researchProductDetail/${lookData.value.productId}`,
        });
    }
};
/** 获取详情 */
const getLook = async (id: any) => {
    showLoading.value = true
    var res: any;
    if (title.value == '组长审批') {
        res = await getFirstDetailsByIdInvent({ id })
        res.data.inventFirstLogLast = res.data.inventFirstLogList[res.data.inventFirstLogList.length - 1]
        lookData.value = res.data
    } else if (title.value == '总监初审') {
        res = await getSecondDetailsByIdInvent({ id })
        res.data.inventSecondLogLast = res.data.inventSecondLogList[res.data.inventSecondLogList.length - 1]
        lookData.value = res.data
    } else if (title.value == '总监审批') {
        res = await getThirdDetailsByIdInvent({ id })
        res.data.inventThirdLogLast = res.data.inventThirddLogList[res.data.inventThirddLogList.length - 1]
        lookData.value = res.data
    } else if (title.value == '核价初审') {
        res = await getDetailsById({ id })
        res.data.auditFirstLastLog = res.data.auditFirstLogList[res.data.auditFirstLogList.length - 1]
        lookData.value = res.data
    } else if (title.value == '核价复审') {
        res = await getSecondDetailsById({ id })
        res.data.auditSecondLog = res.data.auditSecondLogList[res.data.auditSecondLogList.length - 1]
        lookData.value = res.data
    } else if (title.value == '入库审批') {
        res = await getStockById({ id })
        if (res.rows && res.rows.length) {
            lookData.value = res.rows[0]
        } else {
            routerBack()
        }
    } else if (title.value == '无合同入库') {
        res = await contractAudit(id)
        res.data.contractLogList = res.data.logList
        res.data.logList.forEach(element => {
            element.createByName = element.creater
        });
        lookData.value = res.data
    } else if (title.value == '变价审批') {
        res = await getPricingById({ id })
        lookData.value = res.data
    }
    showLoading.value = false
}
onMounted(() => {
    title.value = route?.query?.title
    getLook(route?.query?.id)
})
</script>

<style lang="less" scoped>
.approvalDetails {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-flow: column;
    background: #f6f8fa;

    .approvalDetails_header {
        padding-top: 45px;
        background: linear-gradient(#CDECFF 0%, #FFFFFF 100%);
        margin-bottom: 10px;

        .approvalDetails_header_navBar {
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 16px;
            color: #1A1B1C;
            position: relative;

            .approvalDetails_header_navBar_img {
                position: absolute;
                top: 50%;
                left: 15px;
                transform: translate(0%, -50%);
                width: 15px;
                height: 16px;
            }
        }
    }

    .approvalDetails_ListItems {
        margin-bottom: 15px;
    }

    .approvalDetails_box {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 0 15px 15px;
        box-sizing: border-box;
    }

    .approvalDetails_footer {
        width: 375px;
        height: 84px;
        background: #FFFFFF;
        box-shadow: 0px 0px 8px 0px rgba(189, 195, 204, 0.5);
        padding: 20px 15px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .footer_left {
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 14px;
            color: #1A1B1C;

            .footer_left_img {
                width: 10px;
                height: 6px;
                margin-right: 5px;
            }
        }

        .footer_center {
            width: 112px;
            height: 100%;
            border-radius: 23px;
            border: 1px solid #5FBBFF;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 400;
            font-size: 16px;
            color: #0094FF;
        }

        .footer_right {
            width: 140px;
            height: 100%;
            background: linear-gradient(146deg, #0064FF 0%, #008FFF 100%);
            border-radius: 23px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
        }
    }
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .wrapper_div {
        width: 315px;
        height: 317px;
        background-color: #fff;
        border-radius: 5px;
        position: relative;

        :deep(.van-field__control) {
            background: #F6FAFF !important;
        }

        ::placeholder {
            font-size: 14px;
            color: #B8BECA;
        }

        .title {
            font-weight: 500;
            font-size: 16px;
            color: #1A1B1C;
            width: 100%;
            text-align: center;
            margin: 30px 0 20px 0;
        }

        .van-image {
            width: 10px;
            height: 10px;
            position: absolute;
            right: 18px;
            top: 18px;
        }

        :deep(.van-form) {
            min-height: 265px;
        }

        .button {
            color: #FFFFFF;
            font-size: 14px;
            width: 285px;
            height: 44px;
            background: #0094FF;
            border-radius: 23px;
            margin: auto;
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
    }
}

.wrappers {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .wrapper_div {
        width: 315px;
        height: 500px;
        background-color: #fff;
        border-radius: 5px;
        position: relative;
        box-sizing: border-box;
        padding: 0 15px;

        .mechanism_conent {
            width: 285px;
            height: 280px;
            background: linear-gradient(#FBFCFE 0%, #EFF6FF 100%);
            border-radius: 10px;
            margin-top: 15px;
            box-sizing: border-box;
            padding: 20px 15px;

            :deep(.van-cell-group--inset) {
                margin: 0 !important;
                margin-bottom: 20px !important;
                background: transparent !important;
            }

            :deep(.van-cell) {
                padding: 0 !important;
                background: none !important;
                background: transparent !important;
            }

            :deep(.van-field__control) {
                font-weight: 400 !important;
                font-size: 14px !important;
                color: #8492AD !important;

            }

            :deep(.van-field__button) {
                padding-left: 0px !important;
            }

            :deep(.van-field__control) {
                background: transparent !important;
            }

            .mechanism_conent_item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                margin-bottom: 20px;

                .labels {
                    font-weight: 400;
                    font-size: 14px;
                    color: #1A1B1C;
                }

                .value {
                    font-weight: 400;
                    font-size: 14px;
                    color: #8492AD;
                }
            }
        }

        .close {
            width: 10px;
            height: 10px;
            position: absolute;
            right: 18px;
            top: 18px;
        }

        .column {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;


            .lable {
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;

            }

            .value {
                width: 214px;
                height: 36px;
                background: #F2F3F5;
                border-radius: 18px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;
                box-sizing: border-box;
                padding: 0 15px;

                .van-image {
                    width: 10px;
                    height: 6px;
                }
            }
        }

        :deep(.van-cell:after) {
            display: none;
        }

        .label {
            font-weight: 400;
            font-size: 14px;
            color: #000000;
            padding-left: 16px;
        }

        :deep(.van-field__control) {
            background: #F6FAFF !important;
            // height: 40px !important;

        }

        ::placeholder {
            font-size: 14px;
            color: #B8BECA;
        }

        .dates {
            :deep(.van-field__control) {
                height: 40px !important;
            }
        }

        .title {
            font-weight: 500;
            font-size: 16px;
            color: #1A1B1C;
            width: 100%;
            text-align: center;
            margin: 30px 0 20px 0;
        }



        :deep(.van-form) {
            min-height: 265px;
        }

        .buttons {
            width: 285px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            text-align: center;
            line-height: 44px;
            position: absolute;
            bottom: 10px;

            .cancel {
                width: 135px;
                height: 44px;
                border-radius: 23px;
                border: 1px solid #0094FF;
                font-weight: 400;
                font-size: 16px;
                color: #0094FF;
            }

            .save {
                width: 135px;
                height: 44px;
                background: #0094FF;
                border-radius: 23px;
                font-weight: 400;
                font-size: 16px;
                color: #FFFFFF;
            }
        }

        .describe {
            font-weight: 400;
            font-size: 14px;
            color: #8492AD;
            margin-bottom: 10px;
        }



    }

}

.wrapper_qualifications {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .wrapper_div {
        width: 315px;
        height: 280px;
        background-color: #fff;
        border-radius: 5px;
        position: relative;
        box-sizing: border-box;
        padding: 0 15px;

        .close {
            width: 10px;
            height: 10px;
            position: absolute;
            right: 18px;
            top: 18px;
        }

        .describe {
            font-weight: 400;
            font-size: 14px;
            color: #8492AD;
            margin-bottom: 10px;
        }

        .title {
            font-weight: 500;
            font-size: 16px;
            color: #1A1B1C;
            width: 100%;
            text-align: center;
            margin: 30px 0 20px 0;
        }

        .column {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;


            .lable {
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;

            }

            .value {
                width: 214px;
                height: 36px;
                background: #F2F3F5;
                border-radius: 18px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;
                box-sizing: border-box;
                padding: 0 15px;

                .van-image {
                    width: 10px;
                    height: 6px;
                }
            }
        }

        .buttons {
            width: 285px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            text-align: center;
            line-height: 44px;
            position: absolute;
            bottom: 10px;

            .cancel {
                width: 135px;
                height: 44px;
                border-radius: 23px;
                border: 1px solid #0094FF;
                font-weight: 400;
                font-size: 16px;
                color: #0094FF;
            }

            .save {
                width: 135px;
                height: 44px;
                background: #0094FF;
                border-radius: 23px;
                font-weight: 400;
                font-size: 16px;
                color: #FFFFFF;
            }
        }

    }
}
</style>